<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      
      <el-form-item label="模糊查询" prop="searchValue">
        <el-input
		  style="width: 500px"
          v-model="queryParams.searchValue"
          placeholder="通过检查表名称、检查项目、检查内容进行模糊查询"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['check:governCheckTaskItem:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['check:governCheckTaskItem:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['check:governCheckTaskItem:remove']"
        >删除</el-button>
      </el-col>
	  
<!-- 	  <el-col :span="1.5">
	    <el-button
	      type="primary"
	      plain
	      icon="el-icon-upload"
	      size="mini"
	      @click="handleExport"
	      v-hasPermi="['check:governCheckTaskItem:import']"
	    >导入</el-button>
	  </el-col> -->
	  
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['check:governCheckTaskItem:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="governCheckTaskItemList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--<el-table-column label="${comment}" align="center" prop="id" />-->
      <el-table-column label="检查表名称" align="center" prop="checkPlanName" />
	  <el-table-column label="检查项目" align="center" prop="governCheckName" />
      <el-table-column label="检查内容" align="center" prop="governCheckContent" />
      <el-table-column label="检查方法" align="center" prop="governCheckWay" />
      <el-table-column label="创建人" align="center" prop="governCreateBy" />
      <el-table-column label="创建时间" align="center" prop="governCreateDate" />
     
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="205px" fixed="right">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['check:governCheckTaskItem:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['check:governCheckTaskItem:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
	
    <!-- 添加或修改检查项对话框 -->
    <el-dialog :title="title" v-model="open" width="55%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" style="margin-right: 90px">
		<el-row>
		    <el-col :span="12">
				<el-form-item label="检查表名称" prop="checkPlanName">
					<el-input v-model="form.checkPlanName" placeholder="请输入检查表名称" /> 
				</el-form-item>
		    </el-col>
			<el-col :span="12">
			<!-- 	      <el-form-item label="任务名称" prop="governCheckTaskId">
				         <el-select v-model="" placeholder="请输入任务名称" >
				            <el-option v-for="dic in checkTaskList" :key="dic.governCheckTaskId"
				               :label="dic.governCheckTaskName" :value="dic.governCheckTaskId" />
				         </el-select>
				      </el-form-item> -->
				<el-form-item label="检查类型" prop="checkTaskType">
				  <el-select v-model="form.checkTaskType" filterable allow-create clearable style="width: 100%;"
							default-first-option placeholder="请选择检查类型">
					<el-option
					  v-for="val in governCheckTaskTypes"
					  :key="val"
					  :label="val"
					  :value="val">
					</el-option>
				  </el-select>
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-row>
		    <el-col :span="12">
				<el-form-item label="检查项目" prop="governCheckName">
				  <el-input v-model="form.governCheckName" placeholder="请输入检查项目" />
				</el-form-item>
		    </el-col>
			<el-col :span="12">
				<el-form-item label="检查方法" prop="governCheckWay">
				  <el-input v-model="form.governCheckWay" placeholder="请输入检查方法" />
				</el-form-item>
			</el-col>
		</el-row>
		
		<el-form-item label="检查内容"  prop="governCheckContent">
		  <el-input v-model="form.governCheckContent" type="textarea" placeholder="请输入检查内容" />
		</el-form-item>
      </el-form>
	  
	  <template #footer>
	  	  <span  style="text-align: center;">
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
	  	  </span>
	  </template>
    </el-dialog>
  </div>
</template>

<script>
import { listGovernCheckTaskItem, getGovernCheckTaskItem, delGovernCheckTaskItem, addGovernCheckTaskItem, updateGovernCheckTaskItem, getTaskItemCheckTypes} from "@/api/check/governCheckTaskItem";

export default {
  name: "CheckTaskItem",
  data() {
    return {
		// 遮罩层
		loading: true,
		// 选中数组
		ids: [],
		// 非单个禁用
		single: true,
		// 非多个禁用
		multiple: true,
		// 显示搜索条件
		showSearch: true,
		// 总条数
		total: 0,
		// 检查项表格数据
		governCheckTaskItemList: [],
		// 弹出层标题
		title: "",
		// 是否显示弹出层
		open: false,
		// 查询参数
		queryParams: {
		pageNum: 1,
		pageSize: 10,
		searchValue: null,
		type: 1,
		},
		// 表单参数
		form: {type:1},
		// 表单校验
		rules: {
		},
		governCheckTaskTypes: ["日常隐患排查", "综合性隐患排查", "专业性隐患排查", "季节性隐患排查", "节假日或重要时段隐患排查", "外聘专家诊断式排查",
		                           "事故类比隐患排查", "复产复工前隐患排查", "集团专项隐患排查", "其它"]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询检查项列表 */
    getList() {
      this.loading = true;
      listGovernCheckTaskItem(this.queryParams).then(response => {
        this.governCheckTaskItemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
	getCheckTypes() {
		getTaskItemCheckTypes().then(response => {
		  this.governCheckTaskTypes = ["日常隐患排查", "综合性隐患排查", "专业性隐患排查", "季节性隐患排查", "节假日或重要时段隐患排查", "外聘专家诊断式排查",
		  		                           "事故类比隐患排查", "复产复工前隐患排查", "集团专项隐患排查", "其它"];
		  let types = response.data;
		  if (types && types!=null) {
			this.governCheckTaskTypes.push(types);
		  }
		});
	},
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
		checkPlanName: null,
        governCheckName: null,
        governCheckContent: null,
        governCheckWay: null,
		type: 1,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
	  this.queryParams.type = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加检查项";
	  getCheckTypes();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getGovernCheckTaskItem(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改检查项";
		getCheckTypes();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateGovernCheckTaskItem(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGovernCheckTaskItem(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除检查项编号为"' + ids + '"的数据项？').then(function() {
        return delGovernCheckTaskItem(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('check/governCheckTaskItem/export', {
        ...this.queryParams
      }, `governCheckTaskItem_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
